<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>会员卡定制</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/vue3.global.js"></script>
  </head>
  <body>
    <div class="wrapper" id="app">
      <div class="card-form">
        <!-- 会员卡最终效果显示区域 Start -->
        <div class="card-list">
          <div class="card-item" :class="{ '-active' : isCardFlipped }">
            <div class="card-item__side -front">
              <div
                class="card-item__focus"
                :class="{'-active' : focusElementStyle }"
                :style="focusElementStyle"
                ref="focusElement"
              ></div>
              <div class="card-item__cover">
                <img src="./images/bg.jpg" class="card-item__bg" />
              </div>
              <div class="card-item__wrapper">
                <div class="card-item__top">
                  <img src="./images/chip.png" class="card-item__chip" />
                </div>
                <!-- Card Number 输入框输入的卡号显示区域 Start -->
                <label
                  for="cardNumber"
                  class="card-item__number"
                  ref="cardNumberRef"
                >
                  <!-- 目标 1 TODO：在当前 <label for="cardNumber"> 标签中补充代码，完成输入卡号的显示效果。-->
                  <span v-for="(n, $index) in otherCardMask" :key="$index">
                    <transition name="slide-fade-up">
                      <!-- 目标 1 TODO Start -->
                      <div
                        v-if="cardNumber[$index] && (($index > 4 && $index < 9) || ($index > 9 && $index < 14))"
                        class="card-item__numberItem"
                      >
                        *
                      </div>
                      <div
                        v-else-if="n == ' '"
                        class="card-item__numberItem"
                        :class="{'-active': n == ' '}"
                      >
                        {{cardNumber[$index]}}
                      </div>
                      <div
                        v-else-if="cardNumber[$index]"
                        class="card-item__numberItem"
                        :class="{'-active': n == ' '}"
                      >
                        {{cardNumber[$index]}}
                      </div>
                      <div v-else class="card-item__numberItem">{{n}}</div>
                      <!-- 目标 1 TODO End -->
                    </transition>
                  </span>
                </label>
                <!-- Card Number 输入框输入的卡号显示区域 End -->

                <div class="card-item__content">
                  <!-- Card Holders 输入框输入的用户名显示区域 Start -->
                  <label
                    for="cardName"
                    class="card-item__info"
                    ref="cardNameRef"
                  >
                    <div class="card-item__holder">Card Holder</div>
                    <transition name="slide-fade-up">
                      <div
                        class="card-item__name"
                        v-if="cardName && cardName.length"
                        key="1"
                      >
                        <transition-group name="slide-fade-right">
                          <!-- 目标 2 TODO：在下面补充代码，完成输入卡片持有者（Card Holders）Full Name 的显示效果。-->
                          <!-- 目标 2 TODO Start -->
                          <span
                            v-for="item in cardName.replace(/\s+/g,' ')"
                            class="card-item__nameItem"
                            >{{ item }}</span
                          >
                          <!-- 目标 2 TODO End -->
                        </transition-group>
                      </div>
                      <div class="card-item__name" v-else key="2">
                        Full Name
                      </div>
                    </transition>
                  </label>
                  <!-- Card Holders 输入框输入的用户名显示区域 End -->

                  <!-- Expires 日期选择下拉框所选日期显示区域 Start -->
                  <div class="card-item__date" ref="cardDateRef">
                    <label for="cardMonth" class="card-item__dateTitle"
                      >Expires</label
                    >
                    <label for="cardMonth" class="card-item__dateItem">
                      <transition name="slide-fade-up">
                        <span v-if="cardMonth" :key="cardMonth"
                          >{{cardMonth}}</span
                        >
                        <span v-else key="2">MM</span>
                      </transition>
                    </label>
                    /
                    <label for="cardYear" class="card-item__dateItem">
                      <transition name="slide-fade-up">
                        <span v-if="cardYear" :key="cardYear"
                          >{{String(cardYear).slice(2,4)}}</span
                        >
                        <span v-else key="2">YY</span>
                      </transition>
                    </label>
                  </div>
                  <!-- Expiration Date 日期选择下拉框所选日期显示区域 End -->
                </div>
              </div>
            </div>
            <div class="card-item__side -back">
              <div class="card-item__cover">
                <img src="./images/bg.jpg" class="card-item__bg" />
              </div>
              <div class="card-item__band"></div>
              <!-- CVV 卡校验值输入框输入值显示区域 Start -->
              <div class="card-item__cvv">
                <div class="card-item__cvvTitle">CVV</div>
                <div class="card-item__cvvBand">
                  <span v-for="(n, $index) in cardCvv" :key="$index"> * </span>
                </div>
              </div>
              <!-- CVV 卡校验值输入框输入值显示区域 End -->
            </div>
          </div>
        </div>
        <!-- 会员卡最终效果显示区域 End -->

        <!-- 会员卡信息表单输入区域 Start -->
        <div class="card-form__inner">
          <!-- Card Number 输入框 Start -->
          <div class="card-input">
            <label for="cardNumber" class="card-input__label"
              >Card Number</label
            >
            <input
              type="text"
              id="cardNumber"
              class="card-input__input"
              v-model="cardNumber"
              @focus="focusInput"
              @blur="blurInput"
              data-ref="cardNumberRef"
              autocomplete="off"
            />
          </div>
          <!-- Card Number 输入框 End -->

          <!-- Card Holders 输入框 Start -->
          <div class="card-input">
            <label for="cardName" class="card-input__label">Card Holders</label>
            <input
              type="text"
              id="cardName"
              class="card-input__input"
              v-model="cardName"
              @focus="focusInput"
              @blur="blurInput"
              data-ref="cardNameRef"
              autocomplete="off"
            />
          </div>
          <!-- Card Holders 输入框 End -->

          <div class="card-form__row">
            <!-- Expiration Date 日期选择下拉框 Start -->
            <div class="card-form__col">
              <div class="card-form__group">
                <label for="cardMonth" class="card-input__label"
                  >Expiration Date</label
                >
                <select
                  class="card-input__input -select"
                  id="cardMonth"
                  v-model="cardMonth"
                  @focus="focusInput"
                  @blur="blurInput"
                  data-ref="cardDateRef"
                >
                  <option value="" disabled selected>Month</option>
                  <option
                    :value="n < 10 ? '0' + n : n"
                    v-for="n in 12"
                    :disabled="n < minCardMonth"
                    :key="n"
                  >
                    {{n < 10 ? '0' + n : n}}
                  </option>
                </select>
                <select
                  class="card-input__input -select"
                  id="cardYear"
                  v-model="cardYear"
                  @focus="focusInput"
                  @blur="blurInput"
                  data-ref="cardDateRef"
                >
                  <option value="" disabled selected>Year</option>
                  <option
                    :value="$index + minCardYear"
                    v-for="(n, $index) in 12"
                    :key="n"
                  >
                    {{$index + minCardYear}}
                  </option>
                </select>
              </div>
            </div>
            <!-- Expiration Date 日期选择下拉框 End -->

            <!-- CVV 卡校验值输入框 Start -->
            <div class="card-form__col -cvv">
              <div class="card-input">
                <label for="cardCvv" class="card-input__label">CVV</label>
                <input
                  type="text"
                  class="card-input__input"
                  id="cardCvv"
                  maxlength="4"
                  v-model="cardCvv"
                  @focus="flipCard(true)"
                  @blur="flipCard(false)"
                  autocomplete="off"
                />
              </div>
            </div>
            <!-- CVV 卡校验值输入框 End -->
          </div>

          <button class="card-form__button">Submit</button>
        </div>
        <!-- 会员卡信息表单输入区域 End -->
      </div>
    </div>
    <script type="module" src="./js/index.js"></script>
  </body>
</html>
